<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="../css/mui.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    ul,
    ol {
      list-style: none;
    }
    
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    
    .hidden {
      display: none;
    }
    
    .new-btn-login-sp {
      padding: 1px;
      display: inline-block;
      width: 75%;
    }
    
    .new-btn-login {
      background-color: #02aaf1;
      color: #FFFFFF;
      font-weight: bold;
      border: none;
      width: 100%;
      height: 30px;
      border-radius: 5px;
      font-size: 16px;
    }
    
    #main {
      width: 100%;
      margin: 0 auto;
      font-size: 14px;
    }
    
    .red-star {
      color: #f00;
      width: 10px;
      display: inline-block;
    }
    
    .null-star {
      color: #fff;
    }
    
    .content {
      margin-top: 5px;
    }
    
    .content dt {
      width: 100px;
      display: inline-block;
      float: left;
      margin-left: 20px;
      color: #666;
      font-size: 13px;
      margin-top: 8px;
    }
    
    .content dd {
      margin-left: 120px;
      margin-bottom: 5px;
    }
    
    .content dd input {
      width: 85%;
      height: 28px;
      border: 0;
      -webkit-border-radius: 0;
      -webkit-appearance: none;
      background-color: #fff;
    }
    
    #foot {
      margin-top: 10px;
      position: absolute;
      bottom: 15px;
      width: 100%;
    }
    
    .foot-ul {
      width: 100%;
    }
    
    .foot-ul li {
      width: 100%;
      text-align: center;
      color: #666;
    }
    
    .note-help {
      color: #999999;
      font-size: 12px;
      line-height: 130%;
      margin-top: 5px;
      width: 100%;
      display: block;
    }
    
    #btn-dd {
      margin: 20px;
      text-align: center;
    }
    
    .foot-ul {
      width: 100%;
    }
    
    .one_line {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #eeeeee;
      width: 94vw;
      margin-left: 20px;
    }
    
    .am-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: box;
      width: 100%;
      position: relative;
      padding: 7px 0;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      background: #1D222D;
      height: 50px;
      text-align: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      box-pack: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      box-align: center;
    }
    
    .am-header h1 {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      box-flex: 1;
      line-height: 18px;
      text-align: center;
      font-size: 18px;
      font-weight: 300;
      color: #fff;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title"><span id="pageTitle"></span>-支付</h1>
  </header>
  <div class="mui-content" style="height: 100vh; background-color: #fff;">
    <div id="main" style="padding: 20px 0;">
      <form name="alipayment" action="" method="post">
        <div id="body" style="clear:left">
          <dl class="content">
            <dt>商户订单号
：</dt>
            <dd>
              <input id="WIDout_trade_no" name="WIDout_trade_no" disabled="disabled" />
            </dd>
            <hr class="one_line">
            <dt>订单名称
：</dt>
            <dd>
              <input id="WIDsubject" name="WIDsubject" disabled="disabled" />
            </dd>
            <hr class="one_line">
            <dt>付款金额
：</dt>
            <dd>
              <input id="WIDtotal_amount" name="WIDtotal_amount" disabled="disabled" />
            </dd>
            <hr class="one_line">
            <dt>商品描述：</dt>
            <dd>
              <input id="WIDbody" name="WIDbody" disabled="disabled" />
            </dd>
            <hr class="one_line">
            <dt></dt>
            <dd id="btn-dd">
              <span class="new-btn-login-sp">
                <button id="submit" class="new-btn-login" type="button" style="text-align:center;">确 认</button>
              </span>
              <span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span>
            </dd>
          </dl>
        </div>
      </form>
      <!-- <div id="foot">
        <ul class="foot-ul">
          <li>
            支付宝版权所有 2015-2018 ALIPAY.COM
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</body>
<script src="../js/mui.js"></script>
<!-- <script src="../js/beecloud.js"></script> -->
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>

<script type="text/javascript">
  var taskInfo = null,
    submitEle = document.getElementById('submit'),
    orderNo = app.getQueryString('order_no'),
    itemType = orderNo.substr(0, 1);
    itemTitle = app.getQueryString('title');

  document.getElementById('pageTitle').innerText = itemTitle;

  document.addEventListener('DOMContentLoaded', function() {
    if (itemType === 'V') getVipInfo();
  });

  function getVipInfo() {
    http.getToken({
      url: API.getVipInfo,
      data: {
        order_no: orderNo
      },
      token: $state.token,
      deviceType: app.clientType.versions.android ? 'android' : 'iphone',
      success: function(res) {
        console.log('res-->>', res);
        taskInfo = res.data;
        submitAct();
      },
      error: function(err) {
        console.log('请求失败')
      }
    });
  }

  function submitAct() {
    document.getElementById("WIDout_trade_no").value = taskInfo.order_no;
    document.getElementById("WIDsubject").value = taskInfo.title;
    document.getElementById("WIDtotal_amount").value = taskInfo.amount || taskInfo.amount_B;
    document.getElementById("WIDbody").value = taskInfo.describe;

    var subData = {
        WIDout_trade_no: taskInfo.order_no,
        WIDsubject: taskInfo.title,
        WIDtotal_amount: taskInfo.amount || taskInfo.amount_B,
        WIDbody: taskInfo.describe
      },
      submitSwitch = 0;

    submitEle.addEventListener('tap', function(e) {
      if (submitSwitch) return;
      http.postToken({
        url: API.postDoPay,
        data: subData,
        token: $state.token,
        deviceType: app.clientType.versions.android ? 'android' : 'iphone',
        success: function(res) {
          console.log('res-->>', res);
          document.body.innerHTML = res;
          document.forms['alipaysubmit'].submit();
        },
        error: function(err) {
          console.log('请求失败');
        }
      });

      submitSwitch = 1;
    });
  }
</script>

</html>